<!--
 *
 * Red Pitaya Stream service manager
 *
 * Author: Nikolay <n.danilyuk@integrasources.eu>
 *
 * (c) Red Pitaya  http://www.redpitaya.com
 *
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Red Pitaya</title>
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css?1" onerror="location.reload()">
    <link rel="stylesheet" href="../assets/popupstack.css?1" type="text/css" onerror="location.reload()" />
    <link rel="stylesheet" href="../assets/lpulse.css?1" type="text/css">
    <link rel="stylesheet" href="../assets/usermis.css" type="text/css">
    <link rel="stylesheet" href="../assets/help-system/help-system.css?1" type="text/css" onerror="location.reload()" />
    <link href="../assets/loader.css?1" rel="stylesheet" type="text/css" onerror="location.reload()" />
    <link rel="stylesheet" href="css/style.css?2" onerror="location.reload()">
    <script src="../assets/jquery/jquery-2.1.3.min.js?1" onerror="location.reload()"></script>
    <script src="../assets/jquery/jquery-ui.min.js?1" onerror="location.reload()"></script>
    <script src="../assets/jquery/jquery.ui.touch-punch.min.js?1" onerror="location.reload()"></script>
    <script src="../assets/jquery/jquery.cookie.js?3" onerror="location.reload()"></script>
    <script src="../assets/jquery/jquery.browser.js?1" onerror="location.reload()"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js?1" onerror="location.reload()"></script>
    <script src="../assets/browsercheck.js?1" onerror="location.reload()"></script>
    <script src="../assets/popupstack.js?1" onerror="location.reload()"></script>
    <script src="../assets/help-system/help-system.js?1" onerror="location.reload()"></script>
    <script src="../assets/pako.js?1" onerror="location.reload()"></script>
    <script src="js/help-sm.js?1" onerror="location.reload()"></script>
    <script src="js/guiHandler.js?1" onerror="location.reload()"></script>
    <script src="js/sm.js?1" onerror="location.reload()"></script>
    <script src="js/client.js?2" onerror="location.reload()"></script>
</head>

<body class="user_lost connection_lost">
    <div id="loader-wrapper">
        <div id="loader"></div>
    </div>
    <div id="user-wrapper">
        <div id="user"></div>
        <div id="user-desc">Device is already in use by another user.</div>
    </div>
    <div id="pulse-wrapper">
        <div id="pulse"></div>
        <div id="pulse-desc">Connection with device is lost.</div>
    </div>
    <div id="header">
        <div id="description">&nbsp;</div>
    </div>
    <div class="full-content">
        <div class="container-fluid">
            <div class="navbar navbar-inverse" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">T</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/">
                            <img class="back-btn" src="../assets/images/navigation_arrow_left.png">
                        </a>
                        <img class="logo" width=110 src="../assets/images/navigation_logo.png">
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                        </ul>
                    </div>
                    <div id="TITLE_ID" align="center" style="font-size: 18pt;color: lightgray;padding-right: 20%;padding-left: 20%;padding-top: 5px;">
                        Stream server application
                    </div>
                </div>
            </div>
            <div>
                <div id="main" style="visibility: hidden;">
                    <div style="display: flex;">
                        <div class="panels" style="width: 400px;">
                            <div style="height: 100%;display: flex;flex-flow: column;">
                                <label style="width: 100%;text-align: center;height: 30px;font-size: 14pt">Configuration</label>
                                <div style="height: 100%;display: flex;flex-wrap: wrap;align-content: flex-start; overflow-x: auto;">
                                    <div class="configcell">
                                        <div>
                                            <label style="width: 100%;">Mode</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_MODE" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="Local" data-off="Network" value="true"/>
                                        </div>
                                    </div>
                                    <div class="configcell net_use">
                                        <div>
                                            <label style="width: 100%;">Protocol</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_PROTOCOL" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="UDP" data-off="TCP" value="true"/>
                                        </div>
                                    </div>
                                    <div class="configcell net_use">
                                        <div>
                                            <label style="width: 100%;">IP</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_IP_ADDR" class="ipaddress" type="text" minlength="7" maxlength="15" size="15" placeholder="xxx.xxx.xxx.xxx" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                                        </div>
                                    </div>
                                    <div class="configcell net_use">
                                        <div>
                                            <label style="width: 100%;">Port</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_PORT_NUMBER" type="text" size="5" style="width: 100%;" value="8900" step="1" min="1" max="65535">
                                        </div>
                                    </div>
                                    <div class="configcell file_use">
                                        <div>
                                            <label style="width: 100%;">Samples</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_SAMPLES"  type="text" size="15" style="width: 100%;" value="20000000" step="1" min="1" max="20000000">
                                        </div>
                                    </div>
                                    <div class="configcell">
                                        <div>
                                            <label style="width: 100%;">Rate</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_RATE" type="text" size="5" style="width: 100%;" value="" step="1" min="1" max="65535">
                                        </div>
                                    </div>
                                    <div class="configcell">
                                        <div>
                                            <label style="width: 100%;">Resolution</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_RESOLUTION" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="16 Bit" data-off="8 Bit" value="true"/>
                                        </div>
                                    </div>

                                    <div class="configcell">
                                        <div>
                                            <label style="width: 100%;">Use calibration</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_USE_CALIB" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="ON" data-off="OFF" value="true"/>
                                        </div>
                                    </div>
                                    <div class="configcell">
                                        <div>
                                            <label style="width: 100%;">Type of file saved</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <select id="SS_FORMAT" style="width: 100%;" name="rate">
                                                <option value="0">wav</option>
                                                <option value="1">tdms</option>
                                                <option value="2">bin</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="configcell file_use">
                                        <div>
                                            <label style="width: 100%;">Save mode</label>
                                        </div>
                                        <div class="flipswitch_div" style="width: 100%;height: 50%;">
                                            <input id="SS_SAVE_MODE" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="Volt" data-off="Raw" value="true"/>
                                        </div>
                                    </div>
                                    <div class="configcell_long" style="display: flex; justify-content: space-evenly;">
                                        <div style="width: 25%" class="ch1">
                                            <div>
                                                <label style="width: 100%;text-align: center;">CH 1</label>
                                            </div>
                                            <div style="width: 100%;height: 50%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH1_ENABLE" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="On" data-off="Off" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch2">
                                            <div>
                                                <label style="width: 100%;text-align: center;">CH 2</label>
                                            </div>
                                            <div style="width: 100%;height: 50%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH2_ENABLE" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="On" data-off="Off" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch3">
                                            <div>
                                                <label style="width: 100%;text-align: center;">CH 3</label>
                                            </div>
                                            <div style="width: 100%;height: 50%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH3_ENABLE" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="On" data-off="Off" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch4">
                                            <div>
                                                <label style="width: 100%;text-align: center;">CH 4</label>
                                            </div>
                                            <div style="width: 100%;height: 50%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH4_ENABLE" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="On" data-off="Off" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="configcell_long" style="display: flex; justify-content: space-evenly; height: 48px;">
                                        <div style="width: 25%" class="ch1">
                                            <div style="width: 100%;height: 100%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH1_ATTENUATOR" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="1:20" data-off="1:1" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch2">
                                            <div style="width: 100%;height: 100%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH2_ATTENUATOR" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="1:20" data-off="1:1" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch3">
                                            <div style="width: 100%;height: 100%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH3_ATTENUATOR" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="1:20" data-off="1:1" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch4">
                                            <div style="width: 100%;height: 100%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH4_ATTENUATOR" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="1:20" data-off="1:1" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="configcell_long ac_dc" style="display: flex; justify-content: space-evenly; height: 48px;">
                                        <div style="width: 25%" class="ch1">
                                            <div style="width: 100%;height: 100%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH1_AC_DC" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="DC" data-off="AC" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch2">
                                            <div style="width: 100%;height: 100%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH2_AC_DC" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="DC" data-off="AC" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch3">
                                            <div style="width: 100%;height: 100%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH3_AC_DC" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="DC" data-off="AC" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 25%;" class="ch4">
                                            <div style="width: 100%;height: 100%;padding-left: 5px;padding-right: 5px;">
                                                <div class="flipswitch_div" style="width: 100%;height: 100%;">
                                                    <input id="SS_CH4_AC_DC" type="checkbox" style="margin: 0;" class="man_flipswitch flipswitch" data-on="DC" data-off="AC" value="true"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div style="width: 100%;height: 40px;display: flex;padding-top: 5px;padding-bottom: 5px;">
                                    <a href="https://redpitaya.readthedocs.io/en/latest/appsFeatures/applications/streaming/appStreaming.html" target="_blank">
                                        <img class="image_button" src="./img/help_icon.png" width="30px" height="30px" style="margin-right: 10px;">
                                    </a>
                                    <label style="width:80px;height:30px;margin-right:10px;font-size: 12pt;line-height: 30px;">PC Clients</label>
                                    <a id="PC_DESK_WIN" target="_top">
                                        <img class="image_button" src="./img/DeskWinGreen.png" loading="lazy" width="30px" height="30px" style="margin-right: 10px;">
                                    </a>
                                    <a id="PC_CON_WIN" target="_top">
                                        <img class="image_button" src="./img/ConWinGreen.png" loading="lazy" width="30px" height="30px" style="margin-right: 10px;">
                                    </a>
                                    <a id="PC_DESK_LIN" target="_top">
                                        <img class="image_button" src="./img/DeskLinGreen.png" loading="lazy" width="30px" height="30px" style="margin-right: 10px;">
                                    </a>
                                    <a id="PC_CON_LIN" target="_top">
                                        <img class="image_button" src="./img/ConLinGreen.png" loading="lazy" width="30px" height="30px" style="margin-right: 10px;">
                                    </a>
                                    <a id="RP_CON_LIN" target="_top">
                                        <img class="image_button" src="./img/ConRPGreen.png" loading="lazy" width="30px" height="30px" style="margin-right: 10px;">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="panels" style="width: 100%;">
                            <div style="height: 100%;display: flex;flex-flow: column;">
                                <div style="width: 100%;height: 40px;display: flex;padding-top: 5px;padding-bottom: 5px;">
                                    <div>
                                        <img id="svg-is-runnung" src="./img/red_led.png" width="30px" height="30px" style="margin-right: 10px;">
                                    </div>
                                    <div style="width: 100px; margin-left: 10px">
                                        <li class="run_buttons2" id="SM_RUN" style="width: 100%">
                                            <a style="display: block;">Start</a>
                                        </li>
                                    </div>
                                    <div style="width: 100px; margin-left: 10px">
                                        <li class="run_buttons2" id="SM_STOP" style="width: 100%">
                                            <a style="display: block;">Stop</a>
                                        </li>
                                    </div>
                                    <label id="svg-is-data-pass"  style="width: 100px;line-height: 2; text-align: center;height: 30px;font-size: 12pt;color: green;">Data pass</label>
                                </div>
                                <label style="width: 100%;text-align: center;height: 30px;font-size: 14pt;">Files on SD card</label>
                                <div id="files_table" style="height: 100%;display: flex;flex-wrap: wrap;align-content: flex-start; overflow-x: auto;">
                                    <div class="filecell">
                                        <div>
                                            <div>
                                                <label>File name</label>
                                            </div>
                                            <span>
                                                <item>
                                                    <subitem>
                                                        <label>TDMS</label>
                                                    </subitem>
                                                </item>
                                                <item2>
                                                    <label>14322313 Mb</label>
                                                </item2>
                                                <item3/>
                                                <item4>
                                                    <li class="run_buttons2">
                                                        <a>LOG</a>
                                                    </li>
                                                    <li class="run_buttons2" style="width: 30%;height: 22px;">
                                                        <a>LOST</a>
                                                    </li>
                                                    <li class="run_buttons2" style="width: 30%;height: 22px;">
                                                        <a>🡇</a>
                                                    </li>
                                                </item4>
                                            </span>
                                        </div>
                                    </div>

                                </div>
                                <div style="width: 100%;height: 40px;display: flex;padding-top: 5px;padding-bottom: 5px;justify-content: flex-end;">
                                    <div style="width: 150px; margin-left: 10px;flex: auto;">
                                        <div id= "SS_PASS_SAMPLES" style="display: block;"></div>
                                        <div id= "SS_WRITED_SIZE" style="display: block;"></div>
                                    </div>
                                    <div style="width: 150px; margin-left: 10px">
                                        <li class="run_buttons2" id="B_REFRESH" style="width: 100%">
                                            <a style="display: block;">Refresh</a>
                                        </li>
                                    </div>
                                    <div style="width: 150px; margin-left: 10px">
                                        <li class="run_buttons2" id="B_DELETE_ALL" style="width: 100%">
                                            <a style="display: block;">Delete all</a>
                                        </li>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div id="sys_info_view" style="display:none; position:fixed; bottom:0; left: 0; background-color: rgba(0, 0, 0, 0.2); text-align:left; padding: 5px; font-size:12px; color:white;">
                FPS:<span id="fps_view">0</span> Throughput:<span id="throughput_view">0</span> CPU Load:<span id="cpu_load">0</span>
                <br/> Memory total:<span id="totalmem_view">0</span> Free:<span id="freemem_view">0</span> Usage:<span id="usagemem_view">0</span>
            </div>
        </div>
        <div class="modal fade" id="feedback_error" tabindex="-1" role="dialog" aria-labelledby="bazaar_naLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="oops_label">Oops, something went wrong</h4>
                    </div>
                    <div class="modal-body" style="text-align: center; font-size: 18px;">
                        <p>Please send us the report and help us to fix this issue</p>
                        <p>Thank you!</p>
                    </div>
                    <div class="modal-footer">
                        <div class="bazaar-link" style="float: left; width: 50%;">
                            <a href="#" style="border: 1px solid; width: 100%" id="send_report_btn" data-dismiss="modal" class="list-group-item btn">Send report</a>
                        </div>
                        <div class="bazaar-link" style="float: left; width: 50%;">
                            <a href="#" style="border: 1px solid; width: 100%" id="restart_app_btn" data-dismiss="modal" class="list-group-item btn">Restart Application</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="info_dialog" tabindex="-1" role="dialog" aria-labelledby="bazaar_naLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="oops_label">Streaming Application</h4>
                    </div>
                    <div class="modal-body" style="text-align: center; font-size: 18px;">
                        <p id="info_dialog_label">Out of free disk space</p>
                    </div>
                    <div class="modal-footer">
                        <div class="bazaar-link" style="float: center; width: 100%;">
                            <a href="#" style="border: 1px solid; width: 100%" id="ok_app_btn" data-dismiss="modal" class="list-group-item btn">Ok</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>